<template>
  <a-modal v-model="dialog" append-to-body width="900px" @cancel="cancel">
    <a-tabs v-model="activeKey">
      <a-tab-pane key="1" tab="内置输入变量" v-if="isAdd">
        <a-table ref="table" :bordered="true" size="small" rowKey="id" :columns="columns" :dataSource="data" :rowSelection="rowSelection">
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="自定义输入变量">
        <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="activeKey==2">
          <a-form-model-item label="源头(Source)" prop="source">
            <a-input v-model="form.source"/>
          </a-form-model-item>
          <a-form-model-item label="目标(Target)" prop="target">
            <a-input v-model="form.target"/>
          </a-form-model-item>
        </a-form-model>
      </a-tab-pane>
    </a-tabs>
    <div slot="footer" class="dialog-footer">
      <a-button type="text" size="default" @click="cancel">取消</a-button>
      <a-button type="primary" size="default" @click="doSubmit">确认</a-button>
    </div>
  </a-modal>
</template>

<script>
  import {randomString} from '../../utils'


  export default {
    name: 'VariableSelect',
    data() {
      return {
        dialog: false,
        selectedKeys:[],
        isAdd:true,
        labelCol: {span: 4},
        wrapperCol: {span: 14},
        multiple: true,
        activeKey: "1",
        columns: [
          {
            title: '源头(Source)',
            ellipsis: true,
            dataIndex: 'source'
          },
          {
            title: '目标(Target)',
            dataIndex: 'target'
          }
        ],
        data: [
          {
            "id":"1",
            "source": "applyUserId",
            "target": "applyUserId",
            "variableType": "in"
          },
          {
            "id":"2",
            "source": "JG_LOCAL_PROCESS_ID",
            "target": "JG_SUB_MAIN_PROCESS_ID",
            "variableType": "in"
          }
        ],
        variableType: [
          {value: 'in', label: '输入'},
          {value: 'out', label: '输出'}
        ],
        form: {
          id:'',
          source: '',
          target: '',
          variableType:'in'
        },
        rules: {
          source: [
            {required: true, message: '值不能为空', trigger: 'blur'}
          ],
          target: [
            {required: true, message: '值不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      rowSelection() {
        return {
          hideDefaultSelections: true,
          selectedRowKeys:this.selectedKeys,
          type: this.multiple ? 'checkbox' : 'radio',
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedKeys = selectedRowKeys
            this.selectedRows = selectedRows
          }
        };
      },
    },
    methods: {
      randomString,
      cancel() {
        this.dialog = false
        this.form = {
          id:'',
          source: '',
          target: '',
          variableType:null
        }
      },
      show(tag) {
        this.isAdd=tag;
        if(tag){
          this.activeKey='1'
        }else{
          this.activeKey='2'
        }
        this.dialog = true;
      },
      doSubmit() {
        if (this.activeKey == "1") {
          if (this.selectedRows.length > 0) {
            this.selectedRows.forEach((val, index) => {
              this.$emit('callback', val, this.activeKey)
            });
          }
          this.cancel()
        }
        if (this.activeKey == "2") {
          this.form.id = randomString(16)
          this.$refs['form'].validate((valid) => {
            if (valid) {
              this.$emit('callback', this.form, this.activeKey)
              this.cancel()
            } else {
              return false
            }
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
